<div class="layui-form hisi-search">
    <form action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <label class="layui-form-label">账户</label>
            <div class="layui-input-inline">
                <select name="account_id" class="layui-input field-account_id" lay-verify="required" lay-search="">
                  <option value="">直接选择或搜索选择</option>
                  {$accounts|raw}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-inline">
                <select name="other_type" class="layui-input field-other_type" lay-verify="required" lay-search="">
                  <option value="">直接选择或搜索选择</option>
                  {volist name="other_types" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="cate" class="layui-input field-cate" lay-verify="required" lay-search="">
                  <option value="">直接选择或搜索选择</option>
                  <option value="1">入账</option>
                  <option value="2">出账</option>

                </select>
            </div>
        </div>


        <div class="layui-form-item hisi-search-btn">

            <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-icon layui-icon-search">执行</button>
                <button type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-download-circle export">导出</button>
                <!-- <button type="reset" class="layui-btn layui-btn-primary layui-icon layui-icon-delete">重置</button> -->
            </div>
        </div>
    </form>
</div>
<div class="page-toolbar">

    <div class="layui-btn-group fl">
        <a href="{:url('add')}" class="layui-btn layui-btn-primary layui-icon layui-icon-add-circle-fine hisi-iframe-pop">&nbsp;新增</a>
        <!-- <a data-href="{:url('status?val=1')}" class="layui-btn layui-btn-primary j-page-btns layui-icon layui-icon-play" data-table="dataTable">&nbsp;启用</a>
        <a data-href="{:url('status?val=0')}" class="layui-btn layui-btn-primary j-page-btns layui-icon layui-icon-pause" data-table="dataTable">&nbsp;禁用</a>
        <a data-href="{:url('del')}" class="layui-btn layui-btn-primary j-page-btns confirm layui-icon layui-icon-close red">&nbsp;删除</a> -->
    </div> 
</div>
<table id="dataTable"></table>
{include file="system@block/layui" /}
<script type="text/html" id="statusTpl">
    {{# if(d.id != 0){  }}
    <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="正常|关闭" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?id={{ d.id }}">
    {{# } }}
</script>
<script type="text/html" title="操作按钮模板" id="buttonTpl">
    {{# if(d.id != 0){  }}
    <a href="{:url('edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe-pop">修改</a>
    <a href="{:url('del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a>

    {{# } }}
</script>
<script type="text/javascript">
    layui.use(['table','jquery','excel'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var excel = layui.excel;
        $(document).on('click','.export',function(){
            var form = $('#hisi-table-search').serializeArray();
            var where = new Array();
            form.push({name:'type',value:2});
            $.ajax({
               url: '{:url()}',
               data:form,
               dataType: 'json',
               success: function(res) {
                   // 假如返回的 res.data 是需要导出的列表数据
                   console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
                   // 1. 数组头部新增表头
                   res.data.unshift({
                       sn: '订单编号',
                       account_name:'账户名称',
                       cate_text:'类型',
                       type_text:'进出账',
                       other_type_text:'级别',
                       price:'金额',
                       bak:'备注',
                       createtime:'添加时间'
                   });
                   // 2. 如果需要调整顺序，请执行梳理函数
                   var data = excel.filterExportData(res.data, [
                       'sn',
                       'account_name',
                       'cate_text',
                       'type_text',
                       'price',
                       'other_type_text',
                       'bak',
                       'createtime'
                   ]);
                   // 3. 执行导出函数，系统会弹出弹框
                   excel.exportExcel({
                       sheet1: data
                   }, '其他收付款记录.xlsx', 'xlsx');
               }
           });
        })
        table.render({
            elem: '#dataTable'
            ,url: '{:url('', input('get.'))}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,text: {
                none : '暂无相关数据'
            }
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'sn', title: '订单编号 '}
                ,{field: 'account_name', title: '账户名称'}
                ,{field: 'cate', title: '类型',templet:function(d){
                    if(d.cate == 1){
                        return '入账';
                    }else{
                        return '出账';
                    }
                }}
                ,{field: 'type_text', title: '进出账'}
                ,{field: 'other_type_text', title: '级别'}
                ,{field: 'price', title: '金额',templet:function(d){
                    if(d.cate == 1){
                        return ' +' + d.price;
                    }else{
                        return ' -' + d.price;
                    }
                }}
                ,{field: 'bak', title: '备注'}
                ,{field: 'createtime', title: '添加时间',sort:true}
            ]]
        });
    });
</script>
